import React, { useCallback, useMemo } from 'react';
import classes from './index.module.css';
import classesNames from 'classnames';

interface OneCheckboxInf {
  label: string;
  selected?: boolean;
  onClick?: () => void;
}

export default function OneCheckbox({
  label,
  selected = false,
  onClick,
}: OneCheckboxInf) {
  const checkboxClassName = useMemo(
    function () {
      return classesNames(
        classes.OneCheckbox,
        selected ? classes.SelectedCheckbox : '',
      );
    },
    [selected],
  );

  const handleClick = useCallback(
    function () {
      if (onClick) {
        onClick();
      }
    },
    [onClick],
  );

  return (
    <div className={checkboxClassName} onClick={handleClick}>
      {label}
      <span className={classes.SelectCheck}></span>
    </div>
  );
}
